<template>
	<view class="content">
		<view class="top-box border-box">
			<view class="title">
				{{ title }}
			</view>
			<view class="sum">
				￥{{ getSum() }}
			</view>
			<view class="trade-info" style="padding-bottom: 0;">
				<view class="">
					剩余支付时间:{{ timeval }}
				</view>
			</view>
			<view class="trade-info">
				<view class="">
					订单号:2401204480322814672
				</view>
			</view>
		</view>
		<view class="pay-box border-box">
			<u-radio-group v-model="payVal" wrap @change="radioGroupChange">
				<!-- @change="radioChange"  -->
				<u-radio v-for="(item, index) in payMethod" :key="index" :name="item.name" class="u-radio-item">
					<view class="radio-item">
						<u-image width="40rpx" height="40rpx" :src="getIcon(item.name)" />
						<text style="padding-left: 10rpx;">{{ payMap[item.name] }}</text>
					</view>
				</u-radio>
			</u-radio-group>
		</view>
		<view style="width: 80%; padding-top: 30vh;">
			<u-button type="warning" @click="goto()">确认支付</u-button>
		</view>
		<view class="foot">
			<foot-box />
		</view>
		<!-- <u-image width="300rpx" height="300rpx" :src="src[0]"></u-image> -->
	</view>
</template>

<script setup name='orderPayment'>
	import {
		reactive,
		toRefs,
		ref,
		computed,
		getCurrentInstance,
		onMounted,
		onBeforeUnmount,
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import footBox from '@/components/foot-box/index.vue'
	import request from '@/common/request.js'
	import {
		roundAndPad,
		formatTime
	} from '@/common/common.js'
	const {
		proxy
	} = getCurrentInstance()

	const title = ref('商户名')
	const checked = ref(false)
	const remainingTime = ref(5)
	const timer = ref(null)
	const payMap = ref({
		weixin: '微信',
		alipay: '支付宝',
		yinlian: '银联'
	})
	const sum = ref('2000.02')
	const payVal = ref('')
	const payMethod = ref([{
			name: 'weixin'
		},
		{
			name: 'alipay'
		},
		{
			name: 'yinlian'
		}
	])

	onLoad((options) => {})
	const timeval = computed(() => {
		let val = 0
		if (Number(remainingTime.value) >= 0) {
			val = formatTime(remainingTime.value)
		}
		return val
	})
	onMounted(() => {
		startCountdown()
	})

	onBeforeUnmount(() => {
		clearInterval(timer.value) // 清理定时器
	})

	function startCountdown() {
		timer.value = setInterval(() => {
			if (remainingTime.value > 0) {
				remainingTime.value--
			} else {
				clearInterval(timer.value)
			}
		}, 1000)
	}

	function radioGroupChange(e) {
		console.log(e)
	}

	function getIcon(name) {
		return `../../static/images/${name}.svg`
	}

	function goto() {
		proxy.$System.goTo('/pages/after-pay/index')
	}

	function getSum() {
		return roundAndPad(proxy.sum, 2)
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 40rpx;
		width: 100%;
	}

	.top-box {
		width: 100%;
		text-align: center;
	}

	.sum {
		font-size: 64rpx;
		font-weight: 700;
	}

	.title {
		color: #666;
		padding: 50rpx 0 30rpx;
		font-size: 36rpx;
	}

	.trade-info {
		color: #666;
		padding: 20rpx 0;
		width: 100%;
		line-height: 42rpx;
		margin: auto;
		text-align: center;
	}

	.pay-box {
		margin-top: 20rpx;
		width: 100%;
		padding: 30rpx 60rpx;
	}

	.radio-item {
		display: flex;
		align-items: center;
	}

	.u-radio-item {
		flex-direction: row-reverse;
		justify-content: space-between;
	}

	.foot {
		padding-top: 80rpx;
	}
</style>